<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
	<head lang="en">
		<meta charset="utf-8" />
		<title>最家</title>
		<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
		<script src="../../js/jquery-3.5.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="../../js/user.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="../../css/public.css"/>
		<link rel="stylesheet" type="text/css" href="../../css/mygxin.css" />
		<script src="../../js/jquery.cookie.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript" src="../../js/sweetalert.min.js"></script>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div th:replace="~{front/public/topmargin::topbar}"></div>
		<!------------------------------idea------------------------------>
		<div class="address mt">
			<div class="wrapper clearfix">
				<a href="index" class="fl">首页</a>
				<span>/</span>
				<a href="mygxin">个人中心</a>
				<span>/</span>
				<a href="address" class="on">地址管理</a>
			</div>
		</div>
		
		<!------------------------------Bott------------------------------>
		<div class="Bott">
			<div class="wrapper clearfix">
				<div class="zuo fl">
					<h3>
						<a href="#"><img id="img-avatar" src="../../img/tx.png" width="90px" height="90px"></a>
						<p class="clearfix"><span type="text" class="fl" style="font-size: 15px" id="usernameDouble"></span><span  class="fr" style="font-size: 15px"  ><a th:href="@{/front/logout}"  >[退出登录]</a></span></p>
					</h3>
					<div>
						<h4 style="font-weight: bold">我的交易</h4>
						<ul>
							<li><a href="cart">我的购物车</a></li>
							<li><a href="myorderq">我的订单</a></li>
							<li><a href="myprod">评价晒单</a></li>
						</ul>
						<h4 style="font-weight: bold">个人中心</h4>
						<ul>
							<li><a href="mygxin">我的中心</a></li>
							<li><a href="address">地址管理</a></li>
							<li><a href="release">订单发布</a></li>
						</ul>
						<h4 style="font-weight: bold">账户管理</h4>
						<ul>
							<li><a href="mygrxx">个人信息</a></li>
							<li><a href="remima">修改密码</a></li>
						</ul>
					</div>
				</div>
				<div class="you fl">
					<h2>收货地址</h2>
					<div align="right">
<!--						<a href="#2"  ><img src="../../img/jia.png"/></a>-->
						<span id="addxad"  class="btn btn-sm btn-primary">添加新地址</span>
					</div>
					<div class="panel-body">
						<!--地址显示-->
						<table  class="table table-striped" >
							<!--					<div class=table-responsive">-->
							<!--						<table class="table text-nowrap">-->
							<thead>
							<tr>
								<th>地址类型</th>
								<th>收货人姓名</th>
								<th>详细地址</th>
								<th>联系电话</th>
								<th colspan="3">操作</th>
							</tr>
							</thead>
							<tbody id="address-list">
							</tbody>
						</table>
						<!--					<a href="addAddress" class="btn btn-sm btn-primary"><span class="fa fa-plus"></span>新增收货地址</a>-->

					</div>
				</div>

			</div>
		</div>
		<!--编辑弹框-->
		<!--遮罩-->
		<div class="mask"></div>
		<div class="adddz">
			<form id="form-address" action="#" method="get">
				<input type="text" id="userid" th:value="${session.userid}">
				<input type="text" name="username" id="username" placeholder="姓名" class="on" />
				<input type="text" name="phone" id="phone" placeholder="手机号" />
				<p>收货地址:</p>
				<div class="city">
					<select id="province-list" name="provinceCode">
					</select>
					 <select id="city-list" name="cityCode">
					</select>
					<select id="area-list" name="areaCode" >
					</select>
				</div>
				<textarea name="address"  id="address" rows="" cols="" placeholder="详细地址"></textarea>
				<input name="zip" type="text" id="zip" placeholder="邮政编码" />
<!--				是否为默认地址:<select name="isdefault" id="isdefault">-->
<!--				<option  value="1">是</option>-->
<!--				<option  value="0">否</option>-->
<!--			</select>-->
				地址类型:<select name="tag" id="tag">
				<option  value="家">家</option>
				<option  value="公司">公司</option>
				<option  value="学校">学校</option>
			</select>
				</select>
				<!--				<select id=""-->
				<div class="bc">
					<input type="button" id="addAddress" value="保存" />
					<input type="button" value="取消" />
				</div>
			</form>
		</div>
		<div class="readd">
			<form action="#" method="get">
				<input type="text"  class="on" value="六六六" />
				<input type="text" value="157****0022" />
				<div class="city">
					<select name="">
						<option value="省份/自治区">河北省</option>
					</select>
					<select>
						<option value="城市/地区">唐山市</option>
					</select>
					<select>
						<option value="区/县">路北区</option>
					</select>
					<select>
						<option value="配送区域">火炬路</option>
					</select>
				</div>
				<textarea name="" rows="" cols="" placeholder="详细地址">高新产业园</textarea>
				<input type="text" placeholder="邮政编码" value="063000"/>
				<div class="bc">
					<input type="button" value="保存" />
					<input type="button" value="取消" />
				</div>
			</form>
		</div>
		<!--返回顶部-->
		<div class="gotop">
			<a href="cart">
			<dl>
				<dt><img src="../../img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
			</dl>
			</a>
			<a href="#" class="dh">
			<dl>
				<dt><img src="../../img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin">
			<dl>
				<dt><img src="../../img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="#" class="toptop" style="display: none">
			<dl>
				<dt><img src="../../img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		
		
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="../../img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：400-800-8200，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
	</body>
<script type="text/javascript">
	$(document).ready(function () {
		console.log("from code itself1")
		console.log("cookie中的avatar=" + $.cookie("photo"));
		$("#img-avatar").attr("src", $.cookie("photo"));
		$.ajax({
			url: "/getUserInfo",
			type: "GET",
			dataType: "json",
			success: function(json) {
				if (json.state == 200) {
					console.log("username=" + json.data.username);
					console.log("email=" + json.data.email);
					$("#username").val(json.data.username);
					$("#email").val(json.data.email);
					$("#usernameDouble").text(json.data.username)
				} else {
					alert("获取用户信息失败！" + json.message);
				}
			}
		});
	});

	//省市区联动代码
	let defaultOption = '<option value="0">----- 请选择 -----</option>';

	$(document).ready(function() {
		showProvinceList();
		$("#city-list").append(defaultOption);
		$("#area-list").append(defaultOption);
	});

	$("#province-list").change(function() {
		showCityList();
	});

	$("#city-list").change(function() {
		showAreaList();
	});

	function showProvinceList() {
		$("#province-list").append(defaultOption);
		$.ajax({
			url: "/districts",
			type: "GET",
			data: "parent=86",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					let list = json.data;
					console.log("count=" + list.length);
					for (let i = 0; i < list.length; i++) {
						console.log(list[i].name);
						let option = '<option value="' + list[i].code + '">' + list[i].name + '</option>';
						$("#province-list").append(option);
					}
				}
			}
		});
	}

	function showCityList() {
		let parent = $("#province-list").val();
		$("#city-list").empty();
		$("#area-list").empty();

		$("#city-list").append(defaultOption);
		$("#area-list").append(defaultOption);

		if (parent == 0) {
			return;
		}

		$.ajax({
			url: "/districts",
			type: "GET",
			data: "parent=" + parent,
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					let list = json.data;
					console.log("count=" + list.length);
					for (let i = 0; i < list.length; i++) {
						console.log(list[i].name);
						let option = '<option value="' + list[i].code + '">' + list[i].name + '</option>';
						$("#city-list").append(option);
					}
				}
			}
		});
	}

	function showAreaList() {
		let parent = $("#city-list").val();
		$("#area-list").empty();
		$("#area-list").append(defaultOption);

		if (parent == 0) {
			return;
		}

		$.ajax({
			url: "/districts",
			type: "GET",
			data: "parent=" + parent,
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					let list = json.data;
					console.log("count=" + list.length);
					for (let i = 0; i < list.length; i++) {
						console.log(list[i].name);
						let option = '<option value="' + list[i].code + '">' + list[i].name + '</option>';
						$("#area-list").append(option);
					}
				}
			}
		});
	}



	// 表格显示用户地址信息
	$(document).ready(function () {
		showAddressList();
	});

	function showAddressList() {
		$("#address-list").empty();
		$.ajax({
			url: "/addresses",
			type: "GET",
			dataType: "JSON",
			success: function (json) {
				let list = json.data;
				for (let i = 0; i < list.length; i++) {
					console.log(list[i].name);
					let address = '<tr>'
							+ '<td>#{tag}</td>'
							+ '<td>#{username}</td>'
							+ '<td>#{province}#{city}#{area}#{address}</td>'
							+ '<td>#{phone}</td>'
							+ '<td><a class="btn btn-xs btn-info"><span class="fa fa-edit"></span> 修改</a></td>'
							+ '<td><a onclick="deleteByAid(#{aid})" class="btn btn-xs add-del btn-info"><span class="fa fa-trash-o"></span> 删除</a></td>'
							+ '<td><a onclick="setDefault(#{aid})" class="btn btn-xs add-def btn-default">设为默认</a></td>'
							+ '</tr>';

					address = address.replace(/#{aid}/g, list[i].aid);
					address = address.replace(/#{tag}/g, list[i].tag);
					address = address.replace("#{username}", list[i].username);
					address = address.replace("#{province}", list[i].provinceName);
					address = address.replace("#{city}", list[i].cityName);
					address = address.replace("#{area}", list[i].areaName);
					address = address.replace("#{address}", list[i].address);
					address = address.replace("#{phone}", list[i].phone);

					$("#address-list").append(address);
				}
				$(".add-def:eq(0)").hide();
			}
		});
	}


	//新增收货地址事件
	$("#addAddress").click(function() {
		$.ajax({
			url: "/addresses/add_new_address",
			type: "POST",
			data: $("#form-address").serialize(),
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					// alert("新增收货地址成功！");
					swal({
						title: '新增收货地址成功！',
						icon: 'success'
					}).then(function () {
						location.href = 'address'
					})
				} else {
						// alert("密码错误")
						swal({
							title: '新增收货地址失败！',
							icon: 'warning',
							text: json.message,
							button: {
								text: "确认",
								value: true,
							}
						}).then(function (isok) {
							if (isok) {
								location.href = 'address'
							}
						})
					// alert("新增收货地址失败！" + json.message);
				}
			},
		});
	});


	//设置用户默认地址事件
	function setDefault(aid) {
		$.ajax({
			url: "/addresses/" + aid + "/set_default",
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					swal({
						title: '设置默认地址成功！',
						icon: 'success'
					}).then(function () {
						// location.href = 'address'
						showAddressList();
					})
					// showAddressList();
				} else {
					swal({
						title: '设置默认地址失败！',
						icon: 'warning',
						text: json.message,
						button: {
							text: "确认",
							value: true,
						}
					}).then(function (isok) {
						if (isok) {
							location.href = 'address'
						}
					})
					// alert("设置默认收货地址失败！" + json.message);
				}
			},
			error: function(json) {
				alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + json.status);
				location.href = "login";
			}
		});
	}

	//删除用户收货地址
	function deleteByAid(aid) {
		$.ajax({
			url: "/addresses/" + aid + "/delete",
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					swal({
						title: '删除地址成功！',
						icon: 'success'
					}).then(function () {
						// location.href = 'address'
						showAddressList();
					})
					// showAddressList();
				} else {
					swal({
						title: '删除地址失败！',
						icon: 'warning',
						text: json.message,
						button: {
							text: "确认",
							value: true,
						}
					}).then(function (isok) {
						if (isok) {
							location.href = 'address'
						}
					})
					// alert("删除收货地址失败！" + json.message);
				}
			},
			error: function(xhr) {
				alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);
				location.href = "login";
			}
		});
	}



	//修改用户收货地址
	function changeByAid(aid) {
		$.ajax({
			url: "/addresses/" + aid + "/change",
			type: "POST",
			dataType: "JSON",
			success: function(json) {
				if (json.state == 200) {
					showAddressList();
				} else {
					alert("修改收货地址失败！" + json.message);
				}
			},
			error: function(xhr) {
				alert("您的登录信息已经过期，请重新登录！HTTP响应码：" + xhr.status);
				location.href = "login";
			}
		});
	}



</script>
</html>
